<template>
  <vxe-grid
    ref="xGrid"
    border
    stripe
    keep-source
    auto-resize
    sync-resize
    :loading="listLoading"
    :column-config="{ resizable: true }"
    :export-config="{}"
    :columns="tableColumn"
    align="left"
    show-overflow="tooltip"
    :row-config="{ keyField: 'id', isCurrent: true, isHover: true }"
  >
    <template #ID="{ row, rowIndex }">
      <el-icon v-if="row.auditStatus === 2" class="icon">
        <SuccessFilled />
      </el-icon>
      <el-tag
        v-else-if="row.auditStatus === 1"
        type="primary"
        effect="dark"
        round
      >
        {{ rowIndex + 1 }}
      </el-tag>
      <el-tag
        v-else-if="row.auditStatus === 3"
        type="danger"
        effect="dark"
        round
      >
        {{ rowIndex + 1 }}
      </el-tag>
      <el-tag v-else type="info" effect="dark" round>
        {{ rowIndex + 1 }}
      </el-tag>
    </template>
  </vxe-grid>
</template>

<script lang="ts" setup>
  import { getNodesByTempateGroup } from '@/api/project/audit'
  import { detailsInfoProps, resAuditPageProps } from '../../interface'
  import { useDictStore } from '@/store/modules/dict'

  const _discStore = useDictStore()

  const props = defineProps<{
    detailsInfo: detailsInfoProps
  }>()
  // 表格实例
  const xGrid = ref(null)
  // 加载状态
  const listLoading = ref<boolean>(false)

  const tableColumn = [
    {
      title: '审核进度',
      field: 'ID',
      width: 100,
      slots: { default: 'ID' },
    },
    { title: '审核步骤', field: 'name', minWidth: 120 },
    { title: '审核人', field: 'auditorName', minWidth: 120 },
    {
      title: '审核开始时间',
      field: 'auditStartTime',
      minWidth: 120,
      formatter: ['formatDate', 'yyyy-MM-dd HH:mm:ss'],
    },
    {
      title: '审核完成时间',
      field: 'auditEndTime',
      minWidth: 120,
      formatter: ['formatDate', 'yyyy-MM-dd HH:mm:ss'],
    },
    {
      title: '审核结果',
      field: 'auditStatus',
      minWidth: 120,
      formatter: ({ cellValue }) => {
        return _discStore.getDictLabelForValue('audit_status', cellValue)
      },
    },
    { title: '说明', field: 'explanation', minWidth: 180 },
  ]

  const handleQuery = async (id: number) => {
    try {
      listLoading.value = true
      const params = {
        templateGroup: '经费调整申请',
        businessId: id,
        businessType: 11,
      }
      const res: resAuditPageProps = await getNodesByTempateGroup(params)
      if (res && res.code === 0 && res.data) {
        xGrid.value.reloadData(res.data || [])
      } else {
        xGrid.value.reloadData([])
      }
    } catch (e) {
      console.error('获取审核状态列表出错:', e)
      xGrid.value.reloadData([])
    } finally {
      listLoading.value = false
    }
  }

  watch(
    () => props.detailsInfo?.projectFundingAdjustRespVO?.id,
    (newId: number) => {
      if (newId) {
        handleQuery(newId)
      }
    },
    { immediate: true }
  )
</script>

<style lang="scss" scoped>
  .icon {
    font-size: 22px;
    color: #67c23a;
  }
</style>
